Reactの環境構築まとめ

#React

#初心者向け

荒木智仁

2022.09.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

データアナリティクス事業本部　荒木です。前々から興味のあったReactとJavaScriptに触れる機会があったので、環境構築の手順をまとめます。

環境

Windows
WSL2(Ubuntu 20.04.4 LTS)
Node.js 16.17.0

作業内容

Node.jsインストール

cURLをインストール
```
$ sudo apt-get install curl
```
nvmをインストール
```
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
```
```
$ command -v nvm
nvm
```
command -v nvmを入力し、nvmが返ることを確認してください。

cURL を使用してより新しいバージョンの NVM をインストールすると、古いものが置き換えられ、NVM を使用してインストールした Node のバージョンはそのまま残ります。詳細については、NVM の最新リリース情報に関する GitHub プロジェクトページを参照してください。
Node.js（LTSリリース）をインストール(実稼働アプリケーション用に推奨)
```
$ nvm install --lts
```
最新バージョンのNode.jsをインストール (最新の Node.js 機能と改善をテストするためですが、問題が発生する可能性が高くなります)
```
$ nvm install node
```
2つのバージョンのNode.jsがインストールされていることを確認します。
```
$ nvm ls
->     v16.17.0
        v18.9.0
default -> lts/* (-> v16.17.0)
node -> stable (-> v18.9.0) (default)
stable -> 18.9 (-> v18.9.0) (default)
```

プロジェクトに使用する Node.js のバージョンを変更したい場合、新しいプロジェクトディレクトリを作成し、ディレクトリ内でnvm use nodeを入力して現在のバージョンに切り替えるか、nvm use --ltsを入力して LTS のバージョンに切り替えることができます。

yarnインストール

node.jsのデフォルトパッケージマネージャとしてnpmがありますが、今回はサードパーティのパッケージマネージャのyarnをインストールします。

$ sudo npm install -g yarn

-gオプションをつけることで、yarnがグローバルにインストールされるため、どこのパスにいてもyarnコマンドを使うことができます。

$ yarn --version
1.22.19

yarnがインストールされていることを確認します。

プロジェクトの作成

最後です。プロジェクトを作成し、Reactを動かしてみましょう。任意のディレクトリを作成し、ディレクトリに移動し以下コマンドを実行します。

$ yarn create react-app [プロジェクト名]

プロジェクトに必要なパッケージやファイルが自動でインストールされます。インストールが完了したら、[プロジェクト名]ディレクトリに移動し、以下コマンドでサーバを動かします。

$ yarn start
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.31.33.24:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully

ブラウザで以下の画面が表示されればOKです！

ちなみにこの画面はプロジェクトの中の/src/App.jsを読み込んでいます。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

上記の<p>Edit <code>src/App.js</code> and save to reload.</p>を<p>書き換えテスト</p>に変更し、再度yarn startを実行すると変更が反映されます。